<template>
  <div class="search2-layout">
    <ep-advance-card class="search2-top">
      <ep-row :gutter="10">
        <ep-col :col="8"
          ><div class="item">
            <span>进行中的任务</span>
            <p>10 个任务</p>
          </div></ep-col
        >
        <ep-col :col="8"
          ><div class="item">
            <span>剩余任务</span>
            <p>3 个任务</p>
          </div></ep-col
        >
        <ep-col :col="8"
          ><div class="item">
            <span>任务总耗时</span>
            <p>120 个小时</p>
          </div></ep-col
        >
      </ep-row>
    </ep-advance-card>
    <ep-advance-card class="search2-bottom">
      <div class="line1 clearfix">
        <p>列表</p>
        <div class="search">
          <ep-input placeholder="请输入..." size="normal"></ep-input>
          <i class="ion-3-ios-search"></i>
        </div>
        <div class="btn-status">
          <ep-button size="normal">全部</ep-button>
          <ep-button size="normal">进行中</ep-button>
          <ep-button size="normal">已完成</ep-button>
        </div>
      </div>
      <div class="add-btn" @click="add(1)"><i class="ion-3-md-add"></i>添加</div>
      <div class="form-list" v-for="(item, index) in num" :key="index">
        <ep-form :form="formData" name-width="0" size="normal">
          <ep-row>
            <ep-form-item class="item item1"><img src="~src/assets/demo.jpg" alt="" /></ep-form-item>
            <ep-form-item class="item item2">学生问卷<span>统计学生兴趣爱好</span></ep-form-item>
            <ep-form-item class="item item7">
              <ep-dropdown @item-click="handleItemClick" drop-class="drop-class-custom" type="click">
                <ep-button slot="item" type="text" size="small" icon="3-ios-arrow-down" right-icon>更多</ep-button>
                <ep-dropdown-item item-key="1">
                  <font color="#2296F3" @click="add(2)">编辑</font>
                </ep-dropdown-item>
                <ep-dropdown-item item-key="2">
                  <font color="#27AE60" @click="delect">删除</font>
                </ep-dropdown-item>
              </ep-dropdown>
            </ep-form-item>
            <ep-form-item class="item item6"><span @click="add(2)">编辑</span></ep-form-item>
            <ep-form-item class="item item5">
              <ep-progress v-if="index == 0" :percentage="70" status="error"></ep-progress>
              <ep-progress v-else-if="index % 2 == 0" :percentage="100" status="success"></ep-progress>
              <ep-progress v-else :percentage="70"></ep-progress>
            </ep-form-item>
            <ep-form-item class="item item4">开始时间<span>2022-2-01 12:00:00</span></ep-form-item>
            <ep-form-item class="item item3">负责人<span>Echo</span></ep-form-item>
          </ep-row>
        </ep-form>
      </div>
      <div class="pagination">
        <ep-pager :total-num="50" right></ep-pager>
      </div>
    </ep-advance-card>
    <info :isShow="showInfo" :title="title" @closeInfo="closeInfo" />
  </div>
</template>

<script>
import info from './info'
export default {
  components: {
    info
  },
  data() {
    return {
      num: 7,
      formData: {},
      showInfo: false,
      title: ''
    }
  },
  methods: {
    add(type) {
      if (type == 1) {
        this.title = '新增'
      } else {
        this.title = '编辑'
      }
      this.showInfo = true
    },
    handleItemClick() {},
    closeInfo(v) {
      this.showInfo = v
    },
    delect(id, index) {
      // console.log(id,index)
      this.$confirm({
        word: '是否删除？'
      })
        .then(_ => {
          // this.$pop('点击了确定')
          // this.list.splice(index,1)
          this.num--
        })
        .catch(_ => {
          // this.$pop('点击了取消')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
}
.search2-layout {
  /deep/.ep-advance-card-content {
    padding: 16px;
  }
  .search2-top {
    margin-bottom: 15px;
    .item {
      text-align: center;
      margin: 16px 0;
      span {
        color: rgb(81, 90, 110);
        line-height: 20px;
        display: block;
      }
      p {
        color: rgb(81, 90, 110);
        font-size: 24px;
        line-height: 36px;
      }
    }
  }
  .search2-bottom {
    .line1 {
      padding-bottom: 8px;
      border-bottom: 1px solid #e8eaec;
      p {
        float: left;
        color: rgb(23, 35, 61);
        font-size: 16px;
        line-height: 41px;
      }
      .btn-status {
        float: right;
        margin-right: 16px;
      }
      .search {
        position: relative;
        float: right;
        .ion-3-ios-search {
          position: absolute;
          right: 3px;
          bottom: 8px;
          font-size: 16px;
          opacity: 0.5;
        }
      }
      /deep/.ep-button + .ep-button {
        margin-left: 0;
      }
    }
    .add-btn {
      height: 32px;
      line-height: 32px;
      margin: 16px auto 22px;
      text-align: center;
      border: 1px dashed #d9d9d9;
      cursor: pointer;
      .ion-3-md-add {
        margin-right: 3px;
        margin-top: -2px;
        vertical-align: middle;
      }
    }
    .form-list {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      /deep/.ep-form--content {
        line-height: 26px;
      }
      .item {
        float: right;
      }
      .item1 {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        float: left;
        margin: 4px 16px 0 0;

        img {
          width: 40px;
          height: 40px;
          object-fit: cover;
        }
      }
      span {
        color: #515a6e;
        display: block;
      }
      .item2 {
        float: left;
        max-width: 150px;
        line-height: 22px;
      }
      .item3,
      .item4,
      .item5 {
        margin-right: 26px;
      }
      .item4 {
      }
      .item5 {
        width: 180px;
        margin-top: 20px;
      }
      .item6 {
        margin-top: 13px;
        margin-right: 16px;
        padding-right: 16px;
        border-right: 1px solid #e8e8e8;
        height: 26px;
        cursor: pointer;
      }
      .item7 {
        margin-top: 10px;
      }
      /deep/.ep-button--text {
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }
}
</style>
